<template>
  <dynamics-form
    ref="formRef"
    :model="model"
    :setting="setting"
    tips-placement="right"
  >
    下发名单去重设置<br>
    <div class="h-head">
      <div class="h-left">
        <u-checkbox v-model="checkAll" @click="checkAll = !checkAll">
          策略间名单去重
        </u-checkbox>
      </div>
      <div>
        <div v-if="!show" @click="show = true">
          展开<u-icon type="caret-down" />
        </div>
        <div v-else @click="show = false">
          收起<u-icon type="caret-up" />
        </div>
      </div>
    </div>
    <div>
      <div class="header">
        <u-checkbox v-model="checkAll" @click="checkAll = !checkAll" />
        <span class="text">策略名称</span>
        <span class="font" @click="add">+</span>
      </div>
      <div v-if="show && datalist.length">
        <div class="list" v-for="(item, index) in datalist" :key="item.index">
          <u-checkbox v-model="item.check" @click="item.check = !item.check" />
          <u-input v-model="item.value" placeholder="Enter something..." class="b-inp" />
          <div><u-icon type="delete" @click="del(index)" style="font-size: 20px;cursor: pointer;" /></div>
        </div>
      </div>
      <div v-if="show && !datalist.length" class="list-y">
        暂无数据
      </div>
    </div>
    <div class="flre">
      下发名单与所选策略最近
      <u-input v-model="inputValue" class="inp" />
      天内的名单去重
    </div>
    <div class="flre">
      <u-checkbox v-model="checkAll" @click="checkAll = !checkAll">
        策略名单去重
      </u-checkbox>
    </div>
    <div class="flre">
      下发名单与最近
      <u-input v-model="inputValue" class="inp" />
      个批次内的名单去重
    </div>
    <div class="flre">
      跨条线设置：
      <u-checkbox v-model="checkAll" />
      仅限本条线客户
    </div>

    <!-- <u-form-item class="foot">
      <u-button type="primary" class="m-r-1" @click="handleSubmit">
        提交
      </u-button>
      <u-button type="default" @click="handleReset">重置</u-button>
    </u-form-item> -->
  </dynamics-form>
</template>

<script>
import { reactive, ref } from 'vue'
import { DynamicsForm } from '@bairong/vix'

export default {
  components: {
    DynamicsForm
  },
  setup() {
    const formRef = ref(null)
    const checkAll = ref(false)
    const show = ref(true)
    const inputValue = ref('')
    const datalist = ref([
      { index: 0, check: false, value: '' },
      { index: 1, check: false, value: '' },
      { index: 2, check: false, value: '' }
    ])
    const count = ref(datalist.value.length)
    const setting = ref([
      {
        name: 'Name',
        label: '策略有效期',
        type: 'input',
        rules: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }]
      },
      {
        name: 'address',
        label: '评估期设置',
        type: 'input',
        rules: [{ required: true, message: '请输入公司地址', trigger: 'blur' }]
      },
      {
        name: 'address',
        label: '执行方式',
        type: 'radioGroup',
        options: [
          { value: 1, label: '寄件方付费' },
          { value: 2, label: '收件方付费' }
        ],
        rules: [{ required: true, message: '请输入公司地址', trigger: 'blur' }]
      },
      {
        name: 'address',
        label: '执行周期',
        type: 'input',
        rules: [{ required: true, message: '请输入公司地址', trigger: 'blur' }]
      }
    ])

    const model = reactive({
      userName: '',
      address: '',
      mobile: '',
      amount: '',
      type: 1,
      count: 1,
      isInsured: false,
      sendDate: '',
      getTime: '',
      city: '',
      packageTags: [],
      remark: ''
    })

    const add = () => {
      show.value = true
      datalist.value.push({
        index: count.value += 1,
        check: false,
        value: ''
      })
    }
    const del = val => {
      count.value += 1
      datalist.value.splice(val, 1)
    }

    return {
      formRef,
      model,
      setting,
      handleSubmit: () => {
        formRef.value
          .validate()
          .then(() => {
            console.log(model)
          })
          .catch(() => {
            console.error('验证失败')
          })
      },
      handleReset: () => {
        formRef.value.resetFields()
      },
      checkAll,
      add,
      inputValue,
      del,
      datalist,
      show
    }
  }
}
</script>

<style scoped lang="less">
.foot {
  margin-top: 50px;
}
.header {
  padding-left: 10px;
  height: 50px;
  line-height: 50px;
  background: rgb(245, 247, 249);

  .text {
    padding: 0 60% 0 10px;
  }
  .font {
    font-size: 30px;
    cursor: pointer;
  }
}
.list {
  display: flex;
  padding: 0 8px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dfdfdf;
  .b-inp {
    padding: 0 8px;
  }
}
.list-y {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #dfdfdf;
}
.h-head {
  display: flex;
  .h-left {
    flex-grow: 1;
  }
}
.flre {
  display: flex;
  height: 30px;
  line-height: 30px;
  .inp {
    width: 32px;
    height:20px;
    margin: 0 8px;
  }
}

</style>
